<template>
  <div class="app-container">
    <div>
      <h4 style="text-align: left;">编辑签约</h4>
    </div>

    <el-form label-width="120px">
      <el-descriptions class="margin-top" title="居民信息" :column="3" border>

        <el-descriptions-item label="姓名">
          <el-input v-model="signVo.name"/>
        </el-descriptions-item>

        <el-descriptions-item label="身份证号">
          <el-input v-model="signVo.code"/>
        </el-descriptions-item>

        <el-descriptions-item label="性别">
          <el-select v-model="signVo.sex" placeholder="请选择">
            <el-option :value="'0'" :label="'女'" />
            <el-option :value="'1'" :label="'男'" />
          </el-select>
        </el-descriptions-item>

        <!-- TODO -->
        <el-descriptions-item label="年龄">
          <el-input v-model="signVo.age"/>
<!--          <el-date-picker
            v-model="signVo.age"
            type="date"
            placeholder="选择日期">
          </el-date-picker>-->
        </el-descriptions-item>

        <el-descriptions-item label="联系电话">
          <el-input v-model="signVo.phone"/>
        </el-descriptions-item>

        <el-descriptions-item label="现 居 地" placeholder="请输入" span="2">
          <el-input v-model="signVo.addressNow"/>
        </el-descriptions-item>

        <el-descriptions-item label="居民标签">
          <el-tag
            v-for="label in signVo.labelList"
            :key="label.id"
            :value="label.id"
            effect="plain">
            {{ label.name }}
          </el-tag>
<!--          <el-select v-model="signVo.labelList" multiple placeholder="请选择">
            <el-option
              v-for="label in labelNameList"
              :key="label.id"
              :label="label.name"
              :value="label.id">
            </el-option>
          </el-select>-->
        </el-descriptions-item>

        <el-descriptions-item label="家庭成员">
          <el-link type="primary">+关联家庭成员</el-link>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>

    <el-form label-width="120px">
      <el-descriptions class="margin-top" title="签约信息" :column="3" border>

        <el-descriptions-item label="签约编号">
          {{20201019 + signVo.id}}
        </el-descriptions-item>

        <el-descriptions-item label="签约状态">
          {{signVo.signStatus}}
        </el-descriptions-item>

        <el-descriptions-item label="签约机构">
          <el-select v-model="organizationList" placeholder="请选择" @change="getOrganization">
            <el-option
              v-for="organization in organizationList"
              :key="organization.id"
              :label="organization.name"
              :value="organization.id">
            </el-option>
          </el-select>

        </el-descriptions-item>

        <el-descriptions-item label="签约团队">
          <el-select v-model="signVo.teamName" placeholder="请选择" @change="getTeam">
            <el-option
              v-for="team in teamNameList"
              :key="team.id"
              :label="team.name"
              :value="team.id">
            </el-option>
          </el-select>
        </el-descriptions-item>

        <el-descriptions-item label="签约医生">
          <el-select v-model="signVo.doctorName" placeholder="请选择" >
            <el-option
              v-for="doctor in doctorNameList"
              :key="doctor.id"
              :label="doctor.name"
              :value="doctor.id">
            </el-option>
          </el-select>

        </el-descriptions-item>

        <el-descriptions-item label="服务包">
          <el-select v-model="signVo.packageName" placeholder="请选择">
            <el-option
              v-for="packageName in packageNameList"
              :key="packageName.id"
              :label="packageName.name"
              :value="packageName.id">
            </el-option>
          </el-select>
        </el-descriptions-item>

        <el-descriptions-item label="签约周期">
          {{signVo.signTime}}
        </el-descriptions-item>

        <el-descriptions-item label="费用">
          {{signVo.cost}}
        </el-descriptions-item>

        <el-descriptions-item label="签约类型">
          首次签约
        </el-descriptions-item>

        <el-descriptions-item label="申请时间">
          {{signVo.applyTime}}
        </el-descriptions-item>

        <el-descriptions-item label="生效时间" span="2">
          <el-date-picker
            v-model="signVo.valueTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-descriptions-item >

        <el-descriptions-item label="签约备注">
          <el-input v-model="signVo.remark" :rows="10" type="textarea"/>
        </el-descriptions-item>
      </el-descriptions>

      <el-form-item style="">
        <el-button type="primary" @click="handleAddOrEdit">保存</el-button>
        <el-button @click="back">返 回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
import sign from '../../api/sign'
import team from "../../api/admin/team";
import organization from "../../api/organization";
import label from "../../api/admin/label";

  export default {
    data() {
      return {
        signVo: {              //表单数据的绑定模型
        },
        saveBtnDisabled: false, //防止表单重复提交
        teamNameList: [],            //团队名字
        organizationList: [],        //机构名字
        doctorNameList: [],          //医生名字
        packageNameList: [],         //服务包名字
        labelNameList: [],           //标签名字

      }
    },
    created(){
      // 获取路由地址里面的参数
      console.log(this.$route);
      if(this.$route.params && this.$route.params.id){
        // 表示: 路由参数里面有值，并且有id这个值，就是进行修改操作
        console.log("进行修改操作",this.$route.params.id)
        // 需要通过培训师的id去查询培训师的数据
        this.queryById(this.$route.params.id);
      }
      // 根据团队查机构
      this.getOrganizationList();
      // 查所有标签名
      this.getLabelNameList();


    },
    methods: {
      // 根据ID查询文章
      queryById(id){
        sign.queryById(id).then(res => {
          this.signVo = res.data;
          console.log("id",this.signVo.id)
        });
      },
      // 查询所有团队
      getOrganizationList(){
        organization.getAll().then(res => {
          this.organizationList = res.data;
        });
      },
      //选择机构后
      getOrganization(value){
        //把选择的机构id赋值给数据对象
        this.signVo.organizationId = value;
        // 根据机构ID查询团队
        organization.getTeamByOrganizationId(value).then(res=>{
          this.teamNameList=res.data;
        })
      },
      // 选择团队后
      getTeam(value){
        // 把团队ID赋值给数据对象
        this.signVo.teamId = value;
        // 根据团队ID查询所有医生
        team.queryDoctorByTeamId(value).then(res => {
          this.doctorNameList = res.data;
        });
        // 根据团队ID查询所有服务包
        team.queryPackageByTeamId2(value).then(res => {
          this.packageNameList = res.data;
        });
      },
      //查询所有标签信息
      getLabelNameList(){
        label.getAll().then(res => {
          this.labelNameList = res.data;
        });
      },


      //点击添加按钮
      handleAddOrEdit(){

        // 把saveBtnDisabled 改为true  表示这按钮不可以被点击
        this.saveBtnDisabled = true;

        if(this.$route.params && this.$route.params.id){
          // 修改操作
          sign.edit(this.signVo).then(res => {
            // 弹出提示信息
            this.$message.success(res.message);
            // 添加完成，需要跳转到列表页面
            this.$router.push({ path: '/sign/pendingSign' })
          });
        }else{
          // 增加操作
          //调用新增方法
          sign.add(this.sign).then(res => {
            // 弹出提示信息
            this.$message.success(res.message);
            // 添加完成，需要跳转到列表页面
            this.$router.push({ path: '/sign/pendingSign' })
          });
        }

        this.saveBtnDisabled = false;

      },
      back(){
        this.$router.push({ path: '/sign/pendingSign' });
      },

      /**
       * 图片上传成功之后回调该函数
       * @param res   响应回来的数据,通过该对象可以获得响应数据
       * @param file  上传的图片file
       */
      handleAvatarSuccess(res, file) {
        console.log("上传图片响应回来的数据为:" + res.data);
        //this.sign.image = "http://rj0158yod.hd-bkt.clouddn.com/" + res;
        console.log("this.sign.image = " + this.sign.image);
        this.sign.image = res.data;
      },

      /**
       * 图片上传之前触发该函数，一般用于图片的大小，后缀等信息的校验
       * @param file    上传的图片file
       * @returns {boolean}
       */
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片图片只能是 JPG 或 png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    }
  }
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

